function updatePlayerSidebar(player) {
    var id = player.getID();

    if (OurGame.isMultiplayer && id != OurGame.UID) {
        jQuery('#guest' + id + ' #score').text(player.kills);
    } else {
        jQuery('#guest' + id + ' #score').text('Score ' + player.kills);
    }

    updatePlayerSidebarBombs(player);

    $('#guest' + id + ' #lives').empty();
    for (i = 0; i < player.lives; i++) {
        jQuery('<div/>', {
            class: 'healtIcon'
        }).appendTo('#guest' + id + ' #lives');
    }
}

function updatePlayerSidebarBombs(player) {
    var id = player.getID();
    $('#guest' + id + ' #bombs').empty();
    if (player.currentlyAvailableBombs <= 4) {
        for (i = 0; i < player.currentlyAvailableBombs - player.currentlyPlantedBombs; i ++) {
            jQuery('<div/>', {
                class: 'bombIcon'
            }).appendTo('#guest' + id + ' #bombs');
        }
    } else {
        jQuery('<div/>', {
            class: 'bombNumber'
        })
        .text('' + player.currentlyAvailableBombs - player.currentlyPlantedBombs + ' x')
        .appendTo('#guest' + id + ' #bombs');

        jQuery('<div/>', {
            class: 'bombIcon'
        }).appendTo('#guest' + id + ' #bombs');
    }
}

/**
 * @param player
 * @param myIndex is used to get the right dragon color
 */
function createProfileSideBar(player, myIndex) {
    var uid = OurGame.UID;
    var id = player.getID();

    jQuery('<div/>', {
        id:'guest' + id,
        class:'guest'
    }).appendTo('#upper-profile');

    if (OurGame.isMultiplayer) {
        jQuery('<div/>', {
            id:'guestName' + id,
            class: 'name'
        }).appendTo('#guest' + id);

        getFacebookNameById(uid, function(name) {
            if (name == undefined || name.length < 2) {
                name = 'Unavailable';
            }
            jQuery("<h1/>")
                .text(name)
                .appendTo('#guestName' + id);
        });
    }

    jQuery('<div/>', {
        id:'guestImage' + id,
        class: 'image'
    }).appendTo('#guest' + id);

    createImage(uid, '#guestImage' + id, 80);

    jQuery('<div/>', {
        id:'lives',
        class:'lives'
    }).appendTo('#guestImage' + id);

    jQuery('<div/>', {
        id:'guestInfo' + id,
        class: 'info'
    }).appendTo('#guest' + id);

    jQuery('<div/>', {
        id:'score',
        class:'score'
    }).appendTo('#guestInfo' + id);

    jQuery('<div/>', {
        id:'bombs',
        class:'bombs'
    }).appendTo('#guestInfo' + id);

    jQuery('<div/>', {
        class: 'player-color-indentifier',
        style: "width: 48px; height: 48px; margin-top: 38px; float: right; background: url('img/characters/c" + (myIndex + 1) + ".png') no-repeat; background-position: 0 0;"
    }).appendTo('#guestImage' + id);

    updatePlayerSidebar(player);
}

function createMultiOtherPlayersSideBar(player, myIndex) {
    var id;
    if (OurGame.isMultiplayer) {
        id = player.getID();
    } else {
        id = myIndex;
    }

    jQuery('<div/>', {
        id:'guest' + id,
        class:'multi-guest'
    }).appendTo('#lower-profiles');

    jQuery('<div/>', {
        id:'guestName' + id,
        class: 'name'
    })
        .appendTo('#guest' + id);

    jQuery('<img/>', {
        src:getFBSquarePictureUrlById(id),
        class:'multi-profile_pic'
    }).appendTo('#guest' + id);

    jQuery('<div/>', {
        class: 'player-color-indentifier',
        style: "float: right; width: 48px; height: 48px; background: url('img/characters/c" + (myIndex + 1) + ".png') no-repeat; background-position: 0px 0px;"
    }).appendTo('#guest' + id);

    jQuery("<div/>", {id: 'quest-name' + id}).appendTo('#guestName' + id);
    getFacebookNameById(id, function(name) {
        $('#quest-name' + id).text(name.split(' ')[0]); // /\b/ chars like õ are also boundaries
    });

    jQuery('<div/>', {
        id:"lives"
    })
    .text('Lives ' + player.lives)
        .appendTo('#guest' + id);

    jQuery('<div/>', {
        id:"score"
    })
        .appendTo('#guest' + id);

    updatePlayerSidebar(player);
}